import React from 'react';
import {
  Input,
  Row,
  Col,
  FormGroup,
  FormLabel,
  FormControl,
  Button
} from '@casstime/bricks';
import { observer } from 'mobx-react';
import ExamplePageStore from '../stores/ExamplePageStore';
import TypeSelect from './TypeSelect';
import DateSelect from './DateSelect';

interface ISearchPanelProps {
  store: ExamplePageStore;
}
@observer
export default class SearchPanel extends React.Component<
  ISearchPanelProps,
  {}
> {
  // onSearch() {
  //   try {
  //     this.props.store.updatePageOptions({ current: 1 });
  //     this.props.store.fetchCheckList();
  //     Toast.success('查询成功', 2000);
  //   } catch {
  //     Toast.error('查询失败', 2000);
  //   }
  //   // if (this.props.store.fetchCheckList()) {
  //   //   Toast.success('查询成功', 2000);
  //   // } else {
  //   //   Toast.error('查询失败', 2000);
  //   // }
  // }
  render() {
    return (
      <div>
        <form className="search-panel">
          <Row>
            <FormGroup>
              <Col sm={1} className="align-right">
                <FormLabel align="right">账单编号：</FormLabel>
              </Col>
              <Col sm={2}>
                <FormControl>
                  <Input
                    value={this.props.store.searchOptions.costBillId}
                    onChange={value => this.props.store.changeCostBillId(value)}
                  />
                </FormControl>
              </Col>

              <Col sm={1} className="align-right">
                <FormLabel align="right">账单类型：</FormLabel>
              </Col>
              <Col sm={2}>
                <FormControl>
                  <TypeSelect store={this.props.store} />
                </FormControl>
              </Col>
              <DateSelect store={this.props.store} />
            </FormGroup>
          </Row>
          <div className="align-center">
            <Button onClick={() => this.props.store.onSearch()}>查询</Button>
          </div>
        </form>
      </div>
    );
  }
}
